import { useAppSelector } from "@/store"
import { shallowEqual } from "react-redux"
import React, { memo } from "react"
import useCurrentHook from "./useCurrentHook"
import "./index.less"

const Banners: React.FC = () => {
	// 获取banner数据
	const { banners } = useAppSelector((state) => {
		return {
			banners: state.recommend.banners,
		}
	}, shallowEqual)
	const { current, setCurrent, prev, next, bannerRef } = useCurrentHook(banners)
	return (
		<div
			className="bannerContainer"
			style={{
				background: `url(${banners[current]?.imageUrl}?imageView&blur=40x20) center center / 6000px`,
			}}
		>
			<div className="banner wrap-v2">
				{/* 轮播图片 */}
				<a
					ref={bannerRef}
					className="img"
					href={banners[current]?.url || undefined}
					target="_blank"
					style={{
						background: `url(${banners[current]?.imageUrl}) 0 0 / cover`,
					}}
					rel="noreferrer"
				></a>
				{/* 下载 */}
				<a href="https://music.163.com/#/download" className="download" target="_blank" rel="noopener noreferrer"></a>
				{/* 小圆点 */}
				<div className="dots">
					{banners.map((item, index) => {
						return (
							<div
								key={item.imageUrl}
								className="dot"
								style={{ backgroundColor: current === index ? "#fff" : "rgba(0,0,0,0.5)" }}
								onClick={() => setCurrent(index)}
							></div>
						)
					})}
				</div>
				{/* 左箭头 */}
				<div className="tabbtn btnleft" onClick={prev}></div>
				{/* 右箭头 */}
				<div className="tabbtn btnright" onClick={next}></div>
			</div>
		</div>
	)
}

export default memo(Banners)
